Code Splitting

初期表示にかかる時間、ユーザが操作できるようになるまでの時間の削減する

初期表示に使っていないJSがどれぐらいあるか計測する

実現方法

Webpack

React

Page

ページごと

Fold

viewport外はあとで必要になったらfetch

Temporal

modal、tooltipなど最初に表示されないもの

buttonをclickしてから初めて必要になる処理とか

Code Splittingのデメリット

moduleの読み込む際のlatencyが増える

fetch回数が増える

webpackにあるらしい

dynamic imoprtsとは別ものらしい

状態によって読み込むchunkを変更する

これコードスプリット関係なくだよね？

main.jsと0.jsなどのちがい

main.jsに書かれているものは一気に読まれるのか？

first loadはどの部分になるのか

main.jsが1発めにclientに渡されて、そのあとにloadされるのか？

極端な例として、1ファイルにプロジェクト全てのコードを定義した時、Webpackは良い感じにchunk分割してくれるのか？

これが偽であるならば、できるだけ1ファイルの内容を小さく小さく分けてコードを書いたほうが良い、という話になりそうだが、そういう話は見かけない

例えばformのvalidationのコードとかを1ファイルに書いていると効率が悪い、という話になるはず

参考